<template>
	<view class="content">
		<!-- <view class="top" :style="{ height: `${rect.top + rect.height + 25}px` }">
			<view class="wrapper" :style="{ height: `${rect.height}px`, top: `${rect.top}px` }">
				<view class="back" :style="{ top: `${(rect.height - 24)/2}px` }">
					<image class="back-icon" src="https://snpl.scgjcx.com/static/back.png" @tap="onBack"></image>
				</view>
				<view class="nav">
					{{ stationName }}
				</view>
			</view>
		</view> -->
		<view class="container">
			<view class="list">
				<template v-if="deviceList.length > 0">
					<template v-for="device in deviceList">
							<Item  :key="device.id" :device="device"  />
					</template>
				</template>
				<template v-else>
					<view class="empty">设备为空</view>
				</template>
			</view>
		</view>
	</view>
</template>

<script>
	import { request } from '@/util/request.js';
	import Item from './item.vue';
	export default {
		components: { Item },
		data() {
			return {
				rect: {},
				stationName: '',
				stationId: 0,
				deviceList: [],
				channelList:[]
			}
		},
		onLoad(option) {
			this.rect = uni.getStorageSync('rect');
			this.stationName = option.name;
			this.stationId = option.id - 0;
			uni.setNavigationBarTitle({
				title: option.name
			})
		},
		onShow() {
			this.loadDeviceList();
		},
		methods: {
			onBack() {
				uni.navigateBack();
			},
			loadDeviceList() {
				request({
					path: '/device/page',
					method: 'post',
					data: { station: this.stationId, pageNo: 1, pageSize: 10000 },
					success: ({ data }) => {
						if (data.code === 0) {
							// this.deviceList = data.data.data;
							console.log("获取设备信息",this.deviceList);
							let deviceList = data.data.data;
							
							request({
								path: '/channel/page',
								method: 'post',
								data: { station: this.stationId, pageNo: 1, pageSize: 10000 },
								success: ({ data }) => {
									if (data.code === 0) {
										const channelList = data.data.data;
										deviceList = deviceList.map(device => {
											const workingStatus = channelList.some(it => it.no === device.no && it.workingStatus === true);
											console.log(device, channelList, workingStatus, 'device');
											return { ...device, workingStatus };
										});
										this.deviceList = deviceList;
									}
									console.log("获取站点下所有线路信息",data);
								}
							});
							
						}
						console.log(data);
					}
				});
			},
			//获取站点下所有线路的信息
			loadChannelList() {
				request({
					path: '/channel/page',
					method: 'post',
					data: { station: this.stationId, pageNo: 1, pageSize: 10000 },
					success: ({ data }) => {
						if (data.code === 0) {
							this.channelList = data.data.data;
						}
						console.log("获取站点下所有线路信息",data);
					}
				});
			}
			
			
		}
	}
</script>

<style lang="less" scoped>
	.content {
		display: flex;
		flex-direction: column;
		height: 100vh;
		width: 100vw;
		overflow: hidden;
		
		.top {
			width: 100%;
			box-sizing: border-box;
			background-image: url('https://snpl.scgjcx.com/static/bg1.png');
			
			.wrapper {
				width: 100%;
				position: relative;
				display: flex;
				align-items: center;
				justify-content: center;
				
				.back {
					position: absolute;
					left: 0;
					.back-icon {
						width: 51px;
						height: 25px;
						display: block;
					}
				}
				.nav {
					text-align: center;
					color: #fff;
				}
			}
			
		}
		
		.container {
			width: 100%;
			flex: 1;
			box-sizing: border-box;
			padding-bottom: 20px;
			background-color: rgb(235, 235, 235);
			position: relative;
			overflow: hidden;
			
			.list {
				width: 100%;
				height: 100%;
				box-sizing: border-box;
				padding: 10px;
				overflow: auto;
			}
			
			.empty {
				height: 200px;
				line-height: 200px;
				text-align: center;
				color: darkgrey;
				background-color: #fff;
				border-radius: 10px;
			}
			
		}
		
		
		.popup-content {
			width: 75vw;
			border-radius: 15px;
			background-color: #fff;
			position: relative;
			overflow: hidden;
			display: flex;
			flex-direction: column;
			
			.close {
				text-align: right;
				position: absolute;
				top: 5px;
				right: 10px;
				color: #fff;
			}
			
			.logout-top {
				height: 80px;
				box-sizing: border-box;
				background-color: rgb(75, 102, 207);
				color: #fff;
			}
			
			.form {
				width: 100%;
				flex: 1;
				box-sizing: border-box;
				padding: 20px 20px 30px;
				background-color: #fff;
				
				.form-tip {
					box-sizing: border-box;
					padding: 20px 15px 40px;
					color: rgb(186, 186, 186);
				}
				
				.logout {
					background-color: rgb(74, 100, 205);
					border-radius: 20px;
					color: #fff;
				}
			}
		}
		
	}
</style>
